@charset "utf-8";
@import "./var";
@import "./function";
@import "./mixin/color.scss";
.gs-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;  //鼠标改变图标
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none; //选中边框
    margin: 0;
    transition: .1s;
    font-weight: 500;   
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 4px;
}
.gs-button:hover{
    filter: alpha(Opacity=70);
    opacity: 0.7;
}
.gs-button:active{
    transform: scaleX(1.1);
}
.gs-button--disabled{
    filter: alpha(Opacity=20);
    opacity: 0.2;
}
.gs-button--disabled:hover{
    cursor:default;
    filter: alpha(Opacity=20);
    opacity: 0.2;
}
.gs-button--disabled:active{
    transform: scaleX(1);
}

/** 颜色*/
.gs-button--info{
    @include bgc("info");
    @include fontcol("while");
}
.gs-button--primary{
    @include bgc("primary");
    @include fontcol("while");
}
.gs-button--success{
    @include bgc("success");
    @include fontcol("while");
}
.gs-button--danger{
    @include bgc("danger");
    @include fontcol("while");
}
.gs-button--warning{
    @include bgc("warning");
    @include fontcol("while");
}
.gs-button--dark{
    @include bgc("dark");
    @include fontcol("while");
}
.gs-button--round{
    @include bgc("round");
    @include fontcol("while");
}
.gs-button--light{
    @each $light in (dark,primary, success, warning, danger, info,round,while) {
        &.gs-button--#{$light} {
            background-color: rgba(selectorColor($light), 0.1);
            @include fontcol($light);
            @include border($light)
        }
    }
}

/** 大小 */
.gs-button--mini{
    @include size("mini");
}
.gs-button--small{
    @include size("small");
}
.gs-button--big{
    @include size("big");
}
.gs-button--circle{
    border-radius: 50%;
    &.gs-button--mini{
        padding:8px 8px;
    }
    &.gs-button--small{
        padding:16px 16px;
    }
    &.gs-button--big{
        padding:20px 20px;
    }
}
